<!--案件修复已处理记录-->
<template>
  <div class="page">
    <data-box ref="databox" :params="params" :defaultParams="defaultParams" :server="servers.client" row-key="orapId" showExpend>
      <!--输入区域START-->
      <template slot="mustShowInput">
        <el-form-item label="客户姓名:" v-role="0x050203" prop="reapCust">
          <el-input v-model="params.reapCust"></el-input>
        </el-form-item>
        <el-form-item label="委托方:" v-role="0x050202" prop="prinId">
          <el-select v-model="params.prinId" clearable>
            <el-option v-for="{prinId, prinName} in this.prinData" :key="prinId" :label="prinName" :value="prinId"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template slot="input">
        <el-form-item label="申请省份:" v-role="0x050204" prop="reapProvid">
          <el-select v-model="params.reapProvid" clearable>
            <el-option v-for="{id,areaName} in provinceList" :key="id" :label="areaName" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="申请城市:" v-role="0x050205">
          <el-select v-model="params.reapCityid" clearable>
            <el-option v-for="{id,areaName} in cityList" :key="id" :label="areaName" :value="id"></el-option>
          </el-select>
        </el-form-item>-->
        <div class="inline-box">
          <el-form-item label="申请日期" v-role="0x050205" prop="createTimeBegin">
            <el-date-picker v-model="params.createTimeBegin" type="date" placeholder="选择日期" :picker-options="createTimeBegin" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="-" v-role="0x050205" prop="createTimeEnd">
            <el-date-picker v-model="params.createTimeEnd" type="date" placeholder="选择日期" :picker-options="createTimeEnd" :editable="false">
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="案件金额" v-role="0x050206" prop="reapAmtStart">
            <el-input v-model="params.reapAmtStart" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x050206" prop="reapAmtEnd">
            <el-input v-model="params.reapAmtEnd" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="还款状态:" v-role="0x050207" prop="reapPaystatus">
          <el-select v-model="params.reapPaystatus" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0033')" :key="id" :label="name" :value="name"></el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="逾期天数 " v-role="0x050208" prop="reapOverdayStart" :rules="[
            { validator: validate.validateMin(params.reapOverdayEnd), trigger: 'blur' }
          ]">
            <el-input v-model="params.reapOverdayStart" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x050208" prop="reapOverdayEnd" :rules="[
            { validator: validate.validateMax(params.reapOverdayStart), trigger: 'blur' }
          ]">
            <el-input v-model="params.reapOverdayEnd" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <!--<el-form-item label="状态" v-role="0x050209">
          <el-select v-model="params.orapAppstatu" clearable>
            <el-option label="修复完成" value="24"></el-option>
          </el-select>
        </el-form-item>-->
      </template>
      <!--输入区域END-->
      <!--数据列区域START-->
      <template slot="column">
        <el-table-column type="index" label="序号" width="40"></el-table-column>
        <el-table-column prop="reapOrdernum" label="案件编号" min-width="100"></el-table-column>
        <el-table-column prop="reapBatch" label="批次号" min-width="90"></el-table-column>
        <!--<el-table-column prop="reapCity" label="申请城市" min-width="70"></el-table-column>-->
        <el-table-column prop="createTime" label="申请日期" min-width="120"></el-table-column>
        <el-table-column prop="reapPrincipal" label="委托方" min-width="60"></el-table-column>
        <el-table-column prop="reapCust" label="客户姓名" min-width="60"></el-table-column>
        <el-table-column prop="reapPhone" label="手机号" min-width="80">
          <template scope="scope">
            <span>{{scope.row.reapPhone | encryptPhone}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reapAmt" label="案件金额(元)" min-width="80"></el-table-column>
        <el-table-column prop="reapPaystatus" label="还款状态 " min-width="80">
        </el-table-column>
        <el-table-column prop="reapOverday" label="逾期天数" min-width="60"></el-table-column>
        <el-table-column prop="reapEmpname" label="催收员" min-width="80"></el-table-column>
        <el-table-column prop="reapProtime" label="处理时间" min-width="120"></el-table-column>
        <el-table-column prop="reapAppstatu" label="状态" min-width="60">
          <template scope="scope">
            <span>{{scope.row.reapAppstatu | typeCodeConvert('0022')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="60">
          <template scope="scope">
            <el-button type="text" size="small" @click="repairDetailClick(scope)" v-role="0x050201">修复详情</el-button>
          </template>
        </el-table-column>
      </template>
      <!--数据列区域END-->
    </data-box>
    <el-dialog @open='caseDetail' title="修复详情" v-model="accUserDialogsVisual" size="full">
      <template>
        <CaseRepairInfo @closeDetail="showRepairEditDialog=true" readonly ref='caserepairinfo'></CaseRepairInfo>
        <CaseOriginInfo ref='caseorigininfo'></CaseOriginInfo>
      </template>
    </el-dialog>
    <!--修复弹出框-->
    <el-dialog title="修复信息" v-model="showRepairEditDialog" size="small" :close-on-click-modal="false" :close-on-press-escape="false">
      <template>
        <CustomerRepairInfo @success="refreshRepairInfo" @close="showRepairEditDialog = false" :custId="custId" :repairId="repairId" :data="repairData" :editState="editState"></CustomerRepairInfo>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import server from '@/config/servers'
  import { getCityJson, validateMin, validateMax } from '@/util/common'
  import CaseOriginInfo from '@/views/repair-manage/CaseOriginInfo'
  import CaseRepairInfo from '@/views/repair-manage/CaseRepairInfo'
  import CustomerRepairInfo from '@/views/repair-manage/CustomerRepairInfo'
  import net from '@/util/net'
  import { mapMutations, mapState } from 'vuex'

  export default {
    name: 'case-repair-record',
    data() {
      return {
        servers: {
          client: server.RepairManage.acc_order_apply_repaired_records
        },
        params: {
          prinId: '',
          reapCust: '',
          reapProvid: '',
          reapCityid: '',
          reapPaystatus: '',
          reapAmtStart: '',
          reapAmtEnd: '',
          reapOverdayStart: '',
          reapOverdayEnd: '',
          createTimeBegin: '',
          createTimeEnd: ''
        },
        defaultParams: {
          sort: 'createTime,desc'
        },
        provinceList: getCityJson({ level: 1 }),
        multipleSelection: [],
        accUserDialogsVisual: false,
        prinData: [],
        custId: '',
        repairId: '',
        // 数据范围验证
        validate: {
          validateMin,
          validateMax
        },
        /**
         * 获取申请日期
         */
        createTimeBegin: {
          disabledDate: (time) => {
            let endTime = this.params.createTimeEnd
            if (endTime) {
              return time.getTime() > endTime.getTime()
            }
          }
        },
        createTimeEnd: {
          disabledDate: (time) => {
            let startTime = this.params.createTimeBegin
            if (startTime) {
              return time.getTime() < startTime.getTime()
            }
          }
        }
      }
    },
    computed: {
      ...mapState({
        editState: state => state.repairManage.repair_edit_state,
        repairData: state => state.repairManage.repair_data
      }),
      cityList() {
        return this.params.reapProvid ? getCityJson({ level: 1, parentId: this.params.reapProvid }) : []
      },
      /**
       * 案件详情弹出框状态
       */
      showRepairDetailDialog: {
        get() {
          return this.$store.state.repairManage.dialog.show_repair_detail
        },
        set(val) {
          this.$store.commit('updateRepairDetailDialogVisual', val)
        }
      },
      /**
       * 修复信息编辑弹出栏状态
       */
      showRepairEditDialog: {
        get() {
          return this.$store.state.repairManage.dialog.show_repair_record_detail
        },
        set(val) {
          this.$store.commit('updateRepairRecordDetailDialogVisual', val)
        }
      }
    },
    methods: {
      ...mapMutations([
        'updateCustId',
        'updateRepairId'
      ]),
      /**
       * 刷新案件详情
       */
      refreshRepairDetail() {
        this.$nextTick(() => {
          this.$refs['caseorigininfo'].refresh(this.custId)
          this.$refs['caserepairinfo'].refresh(this.custId)
        })
      },
      /**
       * 刷新修复信息
       */
      refreshRepairInfo() {
        this.showRepairEditDialog = false
        this.$refs['caserepairinfo'].refresh(this.custId)
      },
      /**
       * 处理点击修复详情按钮事件
       */
      repairDetailClick(scope) {
        this.accUserDialogsVisual = true
        // 存储信息
        this.custId = scope.row.custId
        this.repairId = scope.row.reapId

        // 更新store信息
        this.updateCustId(this.custId)
        this.updateRepairId(this.repairId)
      },
      provinceId(value) {
        console.log(value[0])
        if (value.length > 0) {
          this.params.reapProvid = value[0].toString()
        } else {
          this.params.reapProvid = ''
          this.params.reapCityid = ''
        }
      },
      cityId(value) {
        if (value.length > 0) {
          this.params.reapCityid = value[0].toString()
        } else {
          this.params.reapCityid = ''
        }
      },
      /**
       * 修复详情open事件
       */
      caseDetail() {
        this.$nextTick(() => {
          this.$refs['caseorigininfo'].refresh(this.custId)
          this.$refs['caserepairinfo'].refresh(this.custId)
        })
      }
    },
    components: {
      DataBox,
      CaseOriginInfo,
      CaseRepairInfo,
      CustomerRepairInfo
    },
    deactivated() {
      this.accUserDialogsVisual = false
    },
    activated() {
      this.$refs['databox'].refresh()
    },
    mounted() {
      net.send({
        server: server.RepairManage.client_name,
        data: this.$route.path
      }).then((data) => {
        // 接口返回的数据
        this.prinData = data
        console.log(data)
      }, err => {
        this.$message({
          type: 'error',
          message: err.reason
        })
      })
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .inline-box {
    display: inline-block;
    vertical-align: top;
  }

</style>
